<template>
  <div class="map" ref="map"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, reactive, onMounted } from "vue";
import { Map } from "../request/index";
const map = ref();
const list = (name, adcode) => {
  const myCart = echarts.init(map.value);
  Map(adcode).then((res) => {
    console.log(res);
    echarts.registerMap(name, res.data);
    let option = {
      geo: {
        name: name,
        type: "map",
        map: name,
        aspectScale: 0.8,
        layoutCenter: ["50%", "50%"],
        layoutSize: "120%",
        itemStyle: {
          normal: {
            areaColor: {
              type: "linear-gradient",
              x: 0,
              y: 1200,
              x2: 1000,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#152E6E", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#0673AD", // 50% 处的颜色da
                },
              ],
              global: true, // 缺省为 false
            },
            shadowColor: "#0f5d9d",
            shadowOffsetX: 0,
            shadowOffsetY: 15,
            opacity: 0.5,
          },
          emphasis: {
            areaColor: "#0f5d9d",
          },
        },

        regions: [
          {
            name: "南海诸岛",
            itemStyle: {
              areaColor: "rgba(0, 10, 52, 1)",
              borderColor: "rgba(0, 10, 52, 1)",
              normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: "#009cc9",
                },
              },
            },
            label: {
              show: false,
              color: "#FFFFFF",
              fontSize: 12,
            },
          },
        ],
      },
      series: [
        {
          name: name,
          type: "map",
          map: name,
          selectedMode: "multiple",
          mapType: "china",
          aspectScale: 0.8,
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: "120%",
          zoom: 1, //当前视角的缩放比例
          // roam: true, //是否开启平游或缩放
          scaleLimit: {
            //滚轮缩放的极限控制
            min: 1,
            max: 2,
          },
          label: {
            show: false,
            color: "#FFFFFF",
            fontSize: 16,
          },
          itemStyle: {
            normal: {
              areaColor: "#0c3653",
              borderColor: "#1cccff",
              borderWidth: 1.8,
            },
            emphasis: {
              areaColor: "#56b1da",
              label: {
                show: false,
                color: "#fff",
              },
            },
          },
        },
        {
          name: name,
          type: "map",
          map: name,
          coordinateSystem: "geo",
          label: {
            normal: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: "#D8BC37", //标志颜色
            },
          },
          data: [],
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke",
          },
          hoverAnimation: true,
          zlevel: 1,
        },
      ],
    };
    myCart.setOption(option);
  });
};
onMounted(() => {
  list("中华人民共和国", 100000);
});
</script>

<style>
.map {
  width: 100%;
  height: 500px;
  position: absolute;
  top: 0px;
}
</style>
